<template>
  <div class="hello">
    <div class="hello_left">
      <el-card>
        <el-button @click="getFile"></el-button>
        <el-form ref="form" :model="form" label-width="140px">
          <el-form-item label="编号">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>\
          <el-form-item label="提出科室">
            <el-select size="small" v-model="form.depelement">
              <el-option
                v-for="item in depelementList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片">
            <el-button @click="getImages" >从控件中获取图片</el-button>
            <img :src="imgUrl" alt="暂无图片">
            <el-upload
              :limit="1"
              action="#"
              v-model:file-list="fileList"
              :on-success="handleAvatarSuccess"
              :http-request="httpRequest"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="表格">
            <demo-table></demo-table>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="hello_right">
      <vab-only-office ref="vabOnlyOffice" :option="option" />
    </div>
  </div>
</template>

<script>
import demoTable from './table'
import vabOnlyOffice from './newFile'
export default {
  components: {
    demoTable,
    vabOnlyOffice,
  },
  data () {
    return {
      imgUrl: '',
      form: {

      },
      fileList: [],
      depelementList: [
        {
          label: '工艺一室',
          value: '工艺一室'
        },
        {
          label: '工艺二室',
          value: '工艺二室'
        },
        {
          label: '焊接工艺室',
          value: '焊接工艺室'
        },
        {
          label: '焊工培训管理室',
          value: '焊工培训管理室'
        },
      ],
      option: {
        url: "http://192.168.5.8/file/6.2.4.1%E4%B8%9A%E5%8A%A1%E5%8F%8D%E9%A6%88%E5%8D%95.docx",
        isEdit: "true",
        fileType: "",
        title: "",
        lang: "zh-CN",
        isPrint: "",
      },
    }
  },
  mounted() {
  },
  methods: {
    getFile() {
      this.$refs.vabOnlyOffice.getText()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    async httpRequest(file) {
      const res = await this.convertImgToBase64(file.file)
      console.log(res)
      this.$refs.vabOnlyOffice.addImage(res)
    },
    async getImages() {
      const res = await this.$refs.vabOnlyOffice.getImages()
      this.imgUrl = res
    },
    convertImgToBase64(file){
      return new Promise((resolve, reject) => {
        var img = new Image()
        img.src = URL.createObjectURL(file)
        img.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
          var dataURL = canvas.toDataURL('image/' + ext)
          resolve(dataURL)
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.hello{
  width: 100%;
  height: 100%;
  display: flex;
}
.hello_left{
  width: 37%;
  border-right: 1px solid #ccc;
}
.hello_right{
  width: 52%;
  height: 100vh;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ .el-select{
  width: 100%;
}
</style>
